window.onload = function () {
    var charts1 = echarts.init(document.getElementById('charts1'))
    var charts2 = echarts.init(document.getElementById('charts2'))
    var charts3 = echarts.init(document.getElementById('charts3'))
    var charts4 = echarts.init(document.getElementById('charts4'))
    var charts5 = echarts.init(document.getElementById('charts5'))
    var charts6 = echarts.init(document.getElementById('charts6'))
    var charts7 = echarts.init(document.getElementById('charts7'))
    var charts8 = echarts.init(document.getElementById('charts8'))
    var charts9 = echarts.init(document.getElementById('charts9'))
    var charts10 = echarts.init(document.getElementById('charts10'))
    var charts11 = echarts.init(document.getElementById('charts11'))
    var charts12 = echarts.init(document.getElementById('charts12'))
    var charts13 = echarts.init(document.getElementById('charts13'))
    var charts14 = echarts.init(document.getElementById('charts14'))
    var charts15 = echarts.init(document.getElementById('charts15'))

    var option1 = {
        color: ['RGBA(46, 92, 137, 1)', 'RGBA(112, 92, 50, 1)', 'RGBA(48, 137, 145, 1)', 'RGBA(46, 127, 62, 1)'],
        series: [
            {
                type: 'pie',
                radius: ['60%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#102034',
                    borderWidth: 2
                },
                label: {
                    alignTo: 'edge',
                    formatter: '{name|{b}}\n',
                    minMargin: 5,
                    edgeDistance: 5,
                    lineHeight: 15,
                    rich: {
                        name: {
                            fontSize: 18,
                            color: 'rgb(148,185,207)',
                            padding: [0, 0, 5, 0]
                        }
                    }
                },
                labelLayout: function (params) {
                    const isLeft = params.labelRect.x < charts1.getWidth() / 2;
                    const points = params.labelLinePoints;
                    // Update the end point.
                    points[2][0] = isLeft
                        ? params.labelRect.x
                        : params.labelRect.x + params.labelRect.width;
                    return {
                        labelLinePoints: points
                    };
                },
                data: [
                    { value: 1048, name: '安全事件其他' },
                    { value: 735, name: '违规出入' },
                    { value: 580, name: '灾害性事件' },
                    { value: 484, name: '人为破坏' }
                ]
            }
        ]
    }
    var option2 = {
        tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(10, 24, 42,1)',
            textStyle: {
                color: "rgba(255, 255, 255, 1)"
            }
        },
        color: ['rgba(255, 255, 0, 0.8)', 'rgba(234, 111, 0, 0.8)', 'rgba(42, 102, 212, 0.8)', 'rgba(28, 225, 236, 0.8)'],
        legend: {
            right: 0,
            top: 0,
            data: ['人为破坏', '违规出入', '灾害性事件', '安全事件其他'],
            icon: 'path://M801.171 547.589H222.83c-17.673 0-32-14.327-32-32s14.327-32 32-32h578.341c17.673 0 32 14.327 32 32s-14.327 32-32 32z',
            textStyle: {
                color: "#FEFEFF",
                fontWeight: 100
            }
        },
        grid: {
            left: '2%',
            right: '3%',
            bottom: '10%',
            top: '15%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: [
                '1月',
                '2月',
                '3月',
                '4月',
                '5月',
                '6月',
                '7月',
                '8月',
                '9月',
                '10月',
                '11月',
                '12月'
            ],
            axisLine: {
                lineStyle: {
                    color: "RGBA(92, 129, 139, 1)"
                }
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: 'rgba(31, 255, 255, 1)',
                    fontWeight: 100,
                }
            },
        },
        yAxis: {
            type: 'value',
            splitLine: {
                lineStyle: {
                    type: [12, 4],
                    dashOffset: 15,
                    color: 'RGBA(52, 65, 82, 1)'
                },
            },
            axisLine: {
                lineStyle: {
                    color: "rgba(255, 255, 255, 1)",
                }
            },
            axisLabel: {
                show: true,
                textStyle: {
                    fontWeight: 100,
                }
            }
        },
        series: [
            {
                name: '人为破坏',
                type: 'line',
                symbol: 'none',
                data: [120, 20, 100, 80, 120, 10, 50, 60, 70, 80, 10, 110]
            },
            {
                name: '违规出入',
                type: 'line',
                symbol: 'none',
                data: [10, 20, 120, 140, 10, 1, 100, 51, 72, 98, 120, 43]
            },
            {
                name: '灾害性事件',
                type: 'line',
                symbol: 'none',
                data: [50, 130, 1, 70, 140, 1, 50, 10, 20, 120, 140, 1]
            },
            {
                name: '安全事件其他',
                type: 'line',
                symbol: 'none',
                data: [51, 72, 98, 120, 43, 140, 1, 50, 10, 120, 20, 100]
            }
        ]
    }
    var option3 = {
        legend: {
            data: ['已解决', '处理中'],
            icon: 'circle',
            top: 15,
            right: 30,
            textStyle: {
                color: "#FEFEFF",
                fontWeight: 100
            }
        },
        color: [
            {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                    {
                        offset: 0,
                        color: 'rgba(25, 244, 210, 1)'
                    },
                    {
                        offset: 1,
                        color: 'rgba(26, 131, 210, 1)'
                    }
                ]
            },
            {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                    {
                        offset: 0,
                        color: 'rgba(232, 254, 142, 1)'
                    },
                    {
                        offset: 1,
                        color: 'rgba(13, 212, 163, 1)'
                    }
                ],
                global: false
            }
        ],
        grid: {
            left: '2%',
            right: '3%',
            bottom: '10%',
            top: '18%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: ['服务请求', '事件', '变更', '问题', '任务', '值班', '巡检', '部署'],
            axisTick: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: "RGBA(58, 105, 151, 1)"
                }
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: 'rgba(31, 255, 255, 1)',
                    fontWeight: 100,
                    fontSize: 15
                }
            }
        },
        yAxis: {
            type: 'value',
            splitLine: {
                lineStyle: {
                    type: [4, 12],
                    dashOffset: 15,
                    color: 'RGBA(58, 105, 151, 1)'
                },
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: 'rgba(112, 162, 246, 1)',
                    fontWeight: 100
                }
            }
        },
        series: [
            {
                name: '已解决',
                type: 'bar',
                barWidth: 15,
                barCategoryGap: '50%',
                label: {
                    show: true,
                    position: 'top',
                    textStyle: {
                        color: 'rgba(0, 192, 255, 1)'
                    }
                },
                data: [320, 332, 301, 334, 390, 301, 334, 390]
            },
            {
                name: '处理中',
                type: 'bar',
                barWidth: 15,
                barGap: '50%',
                label: {
                    show: true,
                    position: 'top',
                    textStyle: {
                        color: 'rgba(0, 192, 255, 1)'
                    }
                },
                data: [220, 182, 191, 234, 290, 220, 182, 191]
            }
        ]
    }

    var option4 = {
        grid: {
            left: '5%',
            right: '15%',
            bottom: '2%',
            top: '10%',
            containLabel: true
        },
        xAxis: {
            show: false,
            max: function (value) {
                return value.max + (value.max / 3);
            }
        },
        yAxis: {
            data: ['郑建东', '秦泽波', '马瑞', '赵巍', '刘斌'],
            inverse: true,
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            },
            axisLabel: {
                margin: 20,
                color: "rgba(123, 196, 205, 1)",
                fontSize: 16
            }
        },
        series: [{
            type: "pictorialBar",
            symbol: "roundRect",
            symbolRepeat: "fixed",
            symbolMargin: "50%",
            symbolClip: true,
            symbolSize: [6, 22],
            label: {
                show: true,
                position: 'right',
                color: 'inherit',
                fontSize: 28,
                fontWeight: 100,
                offset: [3, 3]
            },
            data: [{
                value: 7,
                itemStyle: {
                    color: 'rgba(255, 192, 0, 1)'
                },
            },
            {
                value: 6,
                itemStyle: {
                    color: 'rgba(0, 255, 204, 1)'
                }
            },
            {
                value: 13,
                itemStyle: {
                    color: 'rgba(0, 168, 255, 1)'
                }
            },
            {
                value: 4,
                itemStyle: {
                    color: 'rgba(0, 212, 80, 1)'
                }
            },
            {
                value: 3,
                itemStyle: {
                    color: 'rgba(161, 109, 255, 1)'
                }
            }],
            z: 2
        },
        {
            type: "pictorialBar",
            symbol: "roundRect",
            symbolRepeat: "fixed",
            symbolMargin: "50%",
            symbolClip: false,
            color: 'rgba(118, 118, 118, 1)',
            symbolSize: [6, 22],
            data: [7, 6, 13, 4, 3],
            z: 1
        }]
    }

    var option5 = {
        grid: {
            left: '8%',
            right: '8%',
            bottom: '10%',
            top: '10%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: ['郑建东', '秦泽波', '马瑞', '赵巍', '刘斌'],
            axisTick: {
                show: false
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: 'rgba(31, 255, 255, 1)',
                    fontWeight: 100,
                    fontSize: 15
                }
            }
        },
        yAxis: {
            type: 'value',
            max: function (value) {
                return value.max + 50;
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(102, 181, 252, 1)'
                },
            },
            axisLine: {
                lineStyle: {
                    color: "rgba(102, 181, 252, 1)"
                }
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: 'rgba(126, 224, 232, 1)',
                    fontWeight: 100
                }
            }
        },
        series: [{
            type: 'bar',
            barWidth: 18,
            data: [
                {
                    value: 120,
                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: 'rgba(197, 255, 201, 1)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(71, 150, 48, 1)'
                                }
                            ]
                        }
                    }
                },
                {
                    value: 200,
                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: 'rgba(162, 242, 233, 1)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(0, 115, 104, 1)'
                                }
                            ]
                        }
                    }
                },

                {
                    value: 150,
                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: 'rgba(183, 203, 255, 1)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(0, 111, 225, 1)'
                                }
                            ]
                        }
                    }
                },
                {
                    value: 200,
                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: 'rgba(251, 202, 167, 1)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(119, 60, 17, 1)'
                                }
                            ]
                        }
                    }
                },
                {
                    value: 50,
                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: 'rgba(240, 250, 191, 1)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(108, 119, 14, 1)'
                                }
                            ]
                        }
                    }
                }
            ]
        }
        ]
    }

    var option6 = {
        color: ['RGBA(51, 123, 179, 1)', 'RGBA(37, 171, 183, 1)', 'RGBA(170, 214, 75, 1)'],
        grid: {
            top: '40',
            left: '40',
            right: '40',
            bottom: '20',
            containLabel: true
        },
        legend: {
            right: 40,
            textStyle: {
                color: "rgba(3, 244, 252, 1)",
                fontSize: 14,
                fontWeight: 100
            },
            itemHeight: 14,
            itemWidth: 14,
            fontSize: 14
        },
        xAxis: {
            type: 'category',
            data: [
                '测试1',
                '测试1',
                '测试1',
                '测试1',
                '测试1',
                '测试1',
                '测试1',
                '测试1',
                '测试1',
                '测试1',
                '测试1',
                '测试1',
                '测试1',
                '测试1',
                '测试1',
                '测试1',
                '测试1',
                '测试1',
                '测试1',
                '测试1',
                '测试1',
                '测试1',
                '测试1',
                '测试1',
                '测试1'
            ],
            axisTick: {
                alignWithLabel: true,
                show: false
            },
            axisLine: {
                show: false
            },
            axisLabel: {
                margin: 30,
                fontWeight: 100,
                interval: 0,
                fontSize: 12,
                color: 'rgba(3, 244, 252, 1)',
                formatter(value) {
                    let ret = ''
                    let maxLength = 4
                    let valLength = value.length
                    let rowN = Math.ceil(valLength / maxLength)
                    if (rowN > 1) {
                        for (let i = 0; i < rowN; i++) {
                            let temp = ''
                            let start = i * maxLength
                            let end = start + maxLength
                            temp = `${value.substring(start, end)}\n`
                            ret += temp
                        }
                        return ret
                    } else {
                        return value
                    }
                }
            }
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                textStyle: {
                    color: "rgba(0, 145, 255, 1)"
                }
            },
            splitLine: {
                lineStyle: {
                    color: ['rgba(0, 145, 255, 0)', 'rgba(0, 145, 255, 1)', 'rgba(0, 145, 255, 1)', 'rgba(0, 145, 255, 1)', 'rgba(0, 145, 255, 1)', 'rgba(0, 145, 255, 1)', 'rgba(0, 145, 255, 1)', 'rgba(0, 145, 255, 1)', 'rgba(0, 145, 255, 1)', 'rgba(0, 145, 255, 1)', 'rgba(0, 145, 255, 1)']
                }
            }
        },
        series: [
            {
                name: '服务器',
                type: 'bar',
                stack: 'total',
                barWidth: 25,
                data: [320, 302, 301, 334, 390, 330, 320, 301, 334, 390, 330, 320, 120, 132, 101, 134, 90, 230, 210, 101, 134, 90, 230, 210, 250]
            },
            {
                name: '存储',
                type: 'bar',
                stack: 'total',
                barWidth: 25,
                data: [320, 302, 301, 334, 390, 330, 320, 301, 334, 390, 330, 320, 120, 132, 101, 134, 90, 230, 210, 101, 134, 90, 230, 210, 250]
            },
            {
                name: '其他',
                type: 'bar',
                stack: 'total',
                barWidth: 25,
                data: [120, 132, 101, 134, 90, 230, 210, 101, 134, 90, 230, 210, 320, 302, 301, 334, 390, 330, 320, 301, 334, 390, 330, 320, 120]
            }
        ]
    }

    var option7 = {
        color: ['RGBA(157, 127, 25, 1)', 'RGBA(9, 160, 106, 1)'],
        legend: {
            orient: 'vertical',
            top: 45,
            icon: 'circle',
            align: 'left',
            right: 115,
            itemWidth: 0,
            itemHeight: 0,
            formatter: (name) => {
                let res = ''
                option7.series[0].data.forEach((e, i) => {
                    if (name === e.name) {
                        res = '{margin|}{myitem' + i + '|}{title|' + name + '}{num' + i + '|' + e.value + '}{abg|}'
                    }
                })
                return res
            },
            textStyle: {
                rich: {
                    num1: {
                        fontSize: 20,
                        fontWeight: 100,
                        padding: [4, 18, 0, 0],
                        width: 20,
                        color: 'RGBA(0, 255, 134, 1)'
                    },
                    num0: {
                        fontSize: 20,
                        fontWeight: 100,
                        padding: [4, 18, 0, 0],
                        width: 20,
                        color: 'RGBA(239, 204, 4, 1)'
                    },
                    margin: {
                        backgroundColor: 'rgb(16,32,52)',
                        width: 10
                    },
                    myitem1: {
                        backgroundColor: 'RGBA(0, 255, 134, 1)',
                        width: 10,
                        height: 10,
                        borderRadius: 5,
                    },
                    myitem0: {
                        backgroundColor: 'RGBA(239, 204, 4, 1)',
                        width: 10,
                        height: 10,
                        borderRadius: 5,
                    },
                    title: {
                        color: 'RGBA(223, 251, 255, 1)',
                        align: 'center',
                        padding: [0, 20, 0, 10]
                    },
                    abg: {
                        backgroundColor: {
                            image: 'images/legend.png'
                        },
                        width: '100%',
                        align: 'right',
                        height: 25
                    },
                }
            }
        },
        series: [
            {
                type: 'pie',
                radius: ['56%', '66%'],
                center: ['37.5%', '46%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderColor: '#102034',
                    borderWidth: 4
                },
                label: {
                    show: false
                },
                data: [
                    { value: 20, name: '满足', itemStyle: { color: 'RGBA(157, 127, 25, 1)' } },
                    { value: 10, name: '超时', itemStyle: { color: 'RGBA(9, 160, 106, 1)' } }
                ]
            }
        ]
    }

    var option8 = {
        color: ['RGBA(157, 127, 25, 1)', 'RGBA(9, 160, 106, 1)', 'RGBA(3, 65, 191, 1)', 'RGBA(0, 255, 246, 1)', 'RGBA(129, 67, 29, 1)'],
        legend: {
            orient: 'vertical',
            top: 10,
            icon: 'circle',
            align: 'left',
            right: 115,
            itemWidth: 0,
            itemHeight: 0,
            formatter: (name) => {
                let res = ''
                option8.series[0].data.forEach((e, i) => {
                    if (name === e.name) {
                        res = '{margin|}{myitem' + i + '|}{title|' + name + '}{num' + i + '|' + e.value + '}{abg|}'
                    }
                })
                return res
            },
            textStyle: {
                rich: {
                    num4: {
                        fontSize: 20,
                        fontWeight: 100,
                        padding: [4, 18, 0, 0],
                        width: 20,
                        color: 'RGBA(188, 76, 9, 1)'
                    },
                    num3: {
                        fontSize: 20,
                        fontWeight: 100,
                        padding: [4, 18, 0, 0],
                        width: 20,
                        color: 'RGBA(0, 255, 246, 1)'
                    },
                    num2: {
                        fontSize: 20,
                        fontWeight: 100,
                        padding: [4, 18, 0, 0],
                        width: 20,
                        color: 'RGBA(1, 53, 249, 1)'
                    },
                    num1: {
                        fontSize: 20,
                        fontWeight: 100,
                        padding: [4, 18, 0, 0],
                        width: 20,
                        color: 'RGBA(0, 255, 134, 1)'
                    },
                    num0: {
                        fontSize: 20,
                        fontWeight: 100,
                        padding: [4, 18, 0, 0],
                        width: 20,
                        color: 'RGBA(239, 204, 4, 1)'
                    },
                    margin: {
                        backgroundColor: 'rgb(16,32,52)',
                        width: 10
                    },
                    myitem4: {
                        backgroundColor: 'RGBA(188, 76, 9, 1)',
                        width: 10,
                        height: 10,
                        borderRadius: 5,
                    },
                    myitem3: {
                        backgroundColor: 'RGBA(0, 255, 246, 1)',
                        width: 10,
                        height: 10,
                        borderRadius: 5,
                    },
                    myitem2: {
                        backgroundColor: 'RGBA(1, 53, 249, 1)',
                        width: 10,
                        height: 10,
                        borderRadius: 5,
                    },
                    myitem1: {
                        backgroundColor: 'RGBA(0, 255, 134, 1)',
                        width: 10,
                        height: 10,
                        borderRadius: 5,
                    },
                    myitem0: {
                        backgroundColor: 'RGBA(239, 204, 4, 1)',
                        width: 10,
                        height: 10,
                        borderRadius: 5,
                    },
                    title: {
                        color: 'RGBA(223, 251, 255, 1)',
                        align: 'center',
                        padding: [0, 20, 0, 10]
                    },
                    abg: {
                        backgroundColor: {
                            image: 'images/legend.png'
                        },
                        width: '100%',
                        align: 'right',
                        height: 25
                    }
                }
            }
        },
        series: [
            {
                type: 'pie',
                radius: ['56%', '66%'],
                center: ['37.5%', '46%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderColor: '#102034',
                    borderWidth: 4
                },
                label: {
                    show: false
                },
                data: [
                    { value: 10, name: '一星', itemStyle: { color: 'RGBA(157, 127, 25, 1)' } },
                    { value: 10, name: '二星', itemStyle: { color: 'RGBA(9, 160, 106, 1)' } },
                    { value: 10, name: '三星', itemStyle: { color: 'RGBA(3, 65, 191, 1)' } },
                    { value: 10, name: '四星', itemStyle: { color: 'RGBA(0, 255, 246, 1)' } },
                    { value: 10, name: '五星', itemStyle: { color: 'RGBA(129, 67, 29, 1)' } }
                ]
            }
        ]
    }

    var option9 = {
        grid: {
            left: '8%',
            right: '8%',
            bottom: '10%',
            top: '10%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: [
                '1月',
                '2月',
                '3月',
                '4月',
                '5月',
                '6月',
                '7月',
                '8月',
                '9月',
                '10月',
                '11月',
                '12月'
            ],
            axisTick: {
                alignWithLabel: true,
                show: false
            },
            axisLine: {
                show: false
            },
            axisLabel: {
                margin: 10,
                fontSize: 12,
                color: 'rgba(3, 244, 252, 1)'
            }
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                textStyle: {
                    color: "RGBA(102, 149, 232, 1)"
                }
            },
            splitLine: {
                lineStyle: {
                    color: ['rgba(0, 145, 255, 0)', 'RGBA(42, 84, 147, 1)', 'RGBA(42, 84, 147, 1)', 'RGBA(42, 84, 147, 1)', 'RGBA(42, 84, 147, 1)', 'RGBA(42, 84, 147, 1)', 'RGBA(42, 84, 147, 1)', 'RGBA(42, 84, 147, 1)', 'RGBA(42, 84, 147, 1)', 'RGBA(42, 84, 147, 1)', 'RGBA(42, 84, 147, 1)', 'RGBA(42, 84, 147, 1)']
                }
            }
        },
        series: [
            {
                symbol: 'circle',
                symbolSize: 6,
                data: [150, 230, 224, 218, 135, 147, 260, 230, 224, 218, 135, 80],
                type: 'line',
                lineStyle: {
                    color: 'RGBA(138, 243, 251, 1)'
                },
                itemStyle: {
                    color: "RGBA(216, 255, 1, 1)",
                    borderWidth: 2,
                    borderColor: 'RGBA(138, 243, 251, 1)'
                }
            }
        ]
    };

    var option10 = {
        grid: {
            left: '8%',
            right: '8%',
            bottom: '10%',
            top: '10%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: [
                '1月',
                '2月',
                '3月',
                '4月',
                '5月',
                '6月',
                '7月',
                '8月',
                '9月',
                '10月',
                '11月',
                '12月'
            ],
            axisTick: {
                alignWithLabel: true,
                show: false
            },
            axisLine: {
                show: false
            },
            axisLabel: {
                margin: 10,
                fontSize: 12,
                color: 'rgba(3, 244, 252, 1)'
            }
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                textStyle: {
                    color: "RGBA(102, 149, 232, 1)"
                }
            },
            splitLine: {
                lineStyle: {
                    color: ['rgba(0, 145, 255, 0)', 'RGBA(42, 84, 147, 1)', 'RGBA(42, 84, 147, 1)', 'RGBA(42, 84, 147, 1)', 'RGBA(42, 84, 147, 1)', 'RGBA(42, 84, 147, 1)', 'RGBA(42, 84, 147, 1)', 'RGBA(42, 84, 147, 1)', 'RGBA(42, 84, 147, 1)', 'RGBA(42, 84, 147, 1)', 'RGBA(42, 84, 147, 1)', 'RGBA(42, 84, 147, 1)']
                }
            }
        },
        series: [
            {
                symbol: 'circle',
                symbolSize: 6,
                data: [150, 230, 224, 218, 135, 147, 260, 230, 224, 218, 135, 80],
                type: 'line',
                lineStyle: {
                    color: 'RGBA(255, 255, 0, 1)'
                },
                itemStyle: {
                    color: "RGBA(255, 150, 0, 1)",
                    borderWidth: 2,
                    borderColor: 'RGBA(255, 255, 0, 1)'
                }
            }
        ]
    };

    var option11 = {
        color: ['rgba(6, 122, 207, 0.8)', 'rgba(71, 80, 197, 0.8)'],
        grid: {
            top: '35',
            left: '26',
            right: '30',
            bottom: '0',
            containLabel: true
        },
        legend: {
            right: 30,
            textStyle: {
                color: 'rgba(0, 255, 255, 1)'
            }
        },
        xAxis: {
            type: 'category',
            data: [
                '数据中心A区',
                '数据中心A区',
                '数据中心A区',
                '数据中心A区',
                '数据中心A区',
                '数据中心A区',
                '数据中心A区',
                '数据中心A区',
                '数据中心A区',
                '数据中心A区',
                '数据中心A区',
                '数据中心A区'
            ],
            axisTick: {
                alignWithLabel: true,
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(102, 181, 252, 1)'
                }
            },
            axisLabel: {
                interval: 0,
                formatter(value) {
                    let ret = ''
                    let maxLength = 4
                    let valLength = value.length
                    let rowN = Math.ceil(valLength / maxLength)
                    if (rowN > 1) {
                        for (let i = 0; i < rowN; i++) {
                            let temp = ''
                            let start = i * maxLength
                            let end = start + maxLength
                            temp = `${value.substring(start, end)}\n`
                            ret += temp
                        }
                        return ret
                    } else {
                        return value
                    }
                },
                color: 'rgba(138, 244, 252, 1)'
            }
        },
        yAxis: {
            type: 'value',
            splitLine: {
                lineStyle: {
                    type: [5, 12],
                    dashOffset: 15,
                    color: 'rgba(102, 181, 252, 0.6)'
                }
            },
            axisLabel: {
                color: 'rgba(112, 162, 246, 1)',
                fontWeight: 100
            }
        },
        series: [
            {
                type: 'pictorialBar',
                symbol: 'rect',
                symbolRepeat: 1,
                symbolSize: ['40%', '32%'],
                color: ['rgb(16,32,52)'],
                data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
                z: 8
            },
            {
                name: '使用机柜',
                type: 'bar',
                stack: 'total',
                barWidth: 25,
                data: [320, 302, 301, 334, 390, 330, 320, 301, 334, 390, 330, 320]
            },
            {
                name: '空闲机柜',
                type: 'bar',
                stack: 'total',
                barWidth: 25,
                data: [120, 132, 101, 134, 90, 230, 210, 101, 134, 90, 230, 210]
            },
            {
                type: 'pictorialBar',
                symbol: 'image://',
                symbolRepeat: 1,
                symbolSize: ['90%', '55%'],
                data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
                z: 9
            }
        ]
    }

    var option12 = {
        color: [
            {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                    {
                        offset: 0,
                        color: 'rgba(57, 214, 196, 1)'
                    },
                    {
                        offset: 1,
                        color: 'rgba(46, 119, 187, 1)'
                    }
                ]
            },
            {
                type: 'linear',
                x: 1,
                y: 0,
                x2: 0,
                y2: 0,
                colorStops: [
                    {
                        offset: 0,
                        color: 'rgba(0, 220, 255, 1)'
                    },
                    {
                        offset: 1,
                        color: 'rgba(178, 126, 255, 1)'
                    }
                ],
                global: false
            }
        ],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            icon: 'circle',
            right: 0,
            textStyle: {
                color: "rgba(0, 255, 255, 1)",
                fontWeight: 100
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top: '8%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01],
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisLabel: {
                color: 'rgba(112, 162, 246, 1)',
                fontWeight: 100
            }
        },
        yAxis: {
            type: 'category',
            data: ['数据中心一层', '数据中心二层', '数据中心三层', '勘探院机房'],
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                color: 'rgba(138, 244, 252, 1)'
            }
        },
        series: [
            {
                name: '设计电力',
                type: 'bar',
                data: [100, 200, 300, 400],
                barWidth: 12,
                barGap: '40%',
                itemStyle: {
                    normal: {
                        barBorderRadius: [0, 50, 50, 0]
                    }
                },
                label: {
                    show: true,
                    position: 'right',
                    textStyle: {
                        color: 'rgba(0, 255, 255, 1)'
                    }
                }
            },
            {
                name: '使用电力',
                type: 'bar',
                barGap: '40%',
                data: [400, 300, 200, 100],
                barWidth: 12,
                itemStyle: {
                    normal: {
                        barBorderRadius: [0, 50, 50, 0]
                    }
                },
                label: {
                    show: true,
                    position: 'right',
                    textStyle: {
                        color: 'rgba(0, 192, 255, 1)'
                    }
                }
            }
        ]
    }

    var option13 = {
        legend: {
            icon: 'circle',
            right: 30,
            textStyle: {
                fontWeight: 100,
                color: 'rgba(0, 255, 255, 1)'
            }
        },
        color: [
            {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                    {
                        offset: 0,
                        color: 'rgba(28, 255, 255, 0.8)'
                    },
                    {
                        offset: 1,
                        color: 'rgba(19, 197, 144, 0.8)'
                    }
                ]
            },
            {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                    {
                        offset: 0,
                        color: 'rgba(0, 255, 255, 0.8)'
                    },
                    {
                        offset: 1,
                        color: 'rgba(40, 65, 255, 0.8)'
                    }
                ],
                global: false
            }
        ],
        grid: {
            left: '2%',
            right: '3%',
            bottom: '3%',
            top: '15%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: ['总电力', 'IT设备电力', '空调其他'],
            axisTick: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(102, 181, 252, 1)'
                }
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: 'rgba(138, 244, 252, 1)'
                }
            }
        },
        yAxis: {
            type: 'value',
            splitLine: {
                lineStyle: {
                    type: [4, 12],
                    dashOffset: 15,
                    color: 'rgba(102, 181, 252, 0.8)'
                }
            },
            axisLabel: {
                show: true,
                textStyle: {
                    fontWeight: 100,
                    color: 'rgba(112, 162, 246, 1)'
                }
            }
        },
        series: [
            {
                name: '设计电力',
                type: 'bar',
                barWidth: 25,
                label: {
                    show: true,
                    position: 'top',
                    textStyle: {
                        color: 'rgba(0, 255, 255, 1)',
                        fontWeight: 100
                    }
                },
                data: [220, 330, 440]
            },
            {
                name: '使用电力',
                type: 'bar',
                barWidth: 25,
                label: {
                    show: true,
                    position: 'top',
                    textStyle: {
                        color: 'rgba(0, 255, 255, 1)',
                        fontWeight: 100
                    }
                },
                data: [440, 330, 220]
            }
        ]
    }

    var option14 = {
        series: [
            {
                max: 6,
                splitNumber: 4,
                radius: '100%',
                type: 'gauge',
                progress: {
                    show: true,
                    width: 16,
                    roundCap: 'round',
                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0,
                                color: 'RGBA(51, 186, 252, 1)'
                            }, {
                                offset: 1,
                                color: 'RGBA(29, 105, 201, 1)'
                            }]
                        }
                    }
                },
                axisLine: {
                    lineStyle: {
                        width: 16,
                        color: [[1, 'RGBA(13, 63, 118, 1)']]
                    }
                },
                axisTick: {
                    show: true,
                    splitNumber: 15,
                    distance: 0,
                    lineStyle: {
                        color: 'rgba(112, 162, 246, 0.7)'
                    }
                },
                splitLine: {
                    length: 15,
                    lineStyle: {
                        width: 1,
                        color: 'rgba(112, 162, 246, 0.7)'
                    },
                    distance: 0
                },
                axisLabel: {
                    distance: 25,
                    color: 'rgba(126, 239, 255, 1)',
                    fontSize: 20,
                    formatter: function (value) {
                        if (String(value).indexOf('.') + 1 > 1) {
                            return '';
                        } else {
                            return value;
                        }
                    }
                },
                pointer: {
                    icon: 'triangle',
                    width: 12,
                    length: '50%',
                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0,
                                color: 'rgba(0, 246, 255, 1)'
                            }, {
                                offset: 1,
                                color: 'rgba(0, 113, 255, 1)'
                            }]
                        }
                    }
                },
                anchor: {
                    show: true,
                    showAbove: true,
                    size: 8,
                    itemStyle: {
                        borderWidth: 4,
                        borderColor: 'rgba(0, 113, 255, 1)',
                        color: 'rgb(16,32,52)'
                    }
                },
                title: {
                    show: false
                },
                detail: {
                    borderWidth: 1,
                    borderColor: 'RGBA(2, 121, 147, 1)',
                    valueAnimation: true,
                    fontSize: 24,
                    fontWeight: 100,
                    lineHeight: 40,
                    width: 140,
                    height: 25,
                    offsetCenter: [0, '90%'],
                    color: 'rgba(178, 250, 255, 1)',
                    formatter: function (value) {
                        return 'P U E = ' + value;
                    }
                },
                data: [{
                    value: 4.11
                }]
            }
        ]
    }

    var option15 = {
        grid: {
            left: '4%',
            right: '5%',
            bottom: '12%',
            top: '15%'
        },
        legend: {
            right: 40,
            icon: 'rect',
            itemWidth: 14,
            textStyle: {
                color: 'rgba(138, 244, 252, 1)',
                fontSize: 14,
                fontWeight: 100
            },
            itemStyle: {
                color: 'rgba(24, 181, 130, 1)'
            }
        },
        xAxis: {
            type: 'category',
            data: [
                '1月',
                '2月',
                '3月',
                '4月',
                '5月',
                '6月',
                '7月',
                '8月',
                '9月',
                '10月',
                '11月',
                '12月'
            ],
            axisTick: {
                alignWithLabel: true,
                show: false
            },
            axisLine: {
                show: false
            },
            axisLabel: {
                margin: 10,
                fontSize: 12,
                color: 'rgba(3, 244, 252, 1)'
            }
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                textStyle: {
                    color: "RGBA(102, 149, 232, 1)"
                }
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(102, 181, 252, 1)'
                }
            }
        },
        series: [
            {
                name: 'PUE值',
                data: [150, 230, 224, 218, 135, 147, 260, 230, 224, 218, 135, 147],
                type: 'line',
                lineStyle: {
                    color: 'rgba(24, 181, 130, 1)',
                    width: 1
                },
                itemStyle: {
                    color: "rgba(0, 255, 255, 1)"
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(80,141,255,0.39)'
                        }, {
                            offset: .34,
                            color: 'rgba(56,155,255,0.25)'
                        }, {
                            offset: 1,
                            color: 'rgba(38,197,254,0.00)'
                        }])
                    }
                }
            }
        ]
    };
    $(".modal").removeClass("modal")
    charts1.setOption(option1)
    charts2.setOption(option2)
    charts3.setOption(option3)
    charts4.setOption(option4)
    charts5.setOption(option5)
    charts6.setOption(option6)
    charts7.setOption(option7)
    charts8.setOption(option8)
    charts9.setOption(option9)
    charts10.setOption(option10)
    charts11.setOption(option11)
    charts12.setOption(option12)
    charts13.setOption(option13)
    charts14.setOption(option14)
    charts15.setOption(option15)
}
